<template>
  <!-- 我的存货 -->
  <div class="my-inventory">
    <c-title :text="name"></c-title>
    <van-search v-model="goods_name" shape="round" placeholder="请输入搜索内容"  @search="onSearch" />
    <d-list :loading="loading" :finished="finished" @load="onLoad">
      <div class="pane">
        <div class="box" v-for="(item,index) in listData" :key="index">
          <div class="top-tip">
            <span class="order-on">{{ item.order_sn }}</span>
            <span class="date">{{ item.created_at }}</span>
          </div>
          <div class="middle-detail">
            <img :src="item.thumb" alt="" />
            <div class="right-goods">
              <div class="top-name">{{ item.title }}</div>
              <div class="bottom-box active-bottom-box">
                <span class="num active-num">数量： {{ item.nums }}</span>
                <span class="remain">剩下： {{ item.rest_nums }}</span>
                <span class="bottom-right" :style="{ opacity: name == '代销管理' && item.lock_time ? '' : '0' }">锁定期: <van-count-down class="van-count" :time="fun.getTimeDifference(item.lock_time)" format="DD天HH:mm:ss" @finish="finishTime(index)"></van-count-down></span></span>
              </div>
            </div>
          </div>
          <!-- v-if="name == '我的存货' || (!item.lock_time || item.lock_time <= now)" -->
          <div class="bottom-btn">
            <span :class="item.take_button ? 'pick-up-goods' : 'pick-up-goods active-bottom-btn'" @click="openTakeGoodsShow(item,item.take_button)">提货</span>
            <span :class="item.help_button ? 'consignment' : 'consignment active-bottom-btn'" @click="openConsignment(item.id,item.help_button,item.order_id)" v-if="name == '我的存货'">代销</span>
            <span :class="item.back_button ? 'platform-repurchase' : 'platform-repurchase active-bottom-btn'" @click="openPlatformShow(item.id,item.back_button)" v-if="name == '代销管理'">平台回购</span>
          </div>
        </div>
      </div>
    </d-list>
    <!-- 代销 -->
    <van-popup v-model="popupConsignmentShow" position="bottom" round>
      <div class="consignment-popup-pane">
        <div class="top-pane">
          <span class="name">代销</span>
          <van-icon name="cross" class="close-icon" @click="popupConsignmentShow = false" />
        </div>
        <div class="tip">选择代销后{{ lock }}天不能进行提货</div>
        <span class="btn-sty" @click="sureConsignment">代销</span>
      </div>
    </van-popup>

    <!-- 平台回购 -->
    <van-popup v-model="popupPlatformShow" :style="{ width: '20rem' }" round get-container="#app">
      <div class="platform-popup-pane">
        <div class="tip">提示</div>
        <div class="cancal-tip">是否确认平台回购?</div>
        <div class="btn-sty">
          <span class="cancal" @click="popupPlatformShow = false">取消</span>
          <span class="line"></span>
          <span class="sure" @click="surePlatform">确定</span>
        </div>
      </div>
    </van-popup>

    <takeGoods :takeGoodsShow.sync="takeGoodsShow" :name="name" :manage_goods="manage_goods" v-if="takeGoodsShow"></takeGoods>
  </div>
</template>

<script>
import myInventory_controller from "./myInventory_controller";

export default myInventory_controller;
</script>

<style>
.platform-popup-pane .tip {
  text-align: center;
  margin-top: 1.31rem;
  font-size: 1rem;
  font-weight: 400;
  color: #202020;
}

.platform-popup-pane .cancal-tip {
  text-align: center;
  font-size: 0.94rem;
  font-weight: 400;
  color: #393939;
  line-height: 1.13rem;
  margin: 2.28rem 0 3.06rem 0;
}

.platform-popup-pane .btn-sty {
  border-top: 0.05rem solid #dbdbdb;

  /* opacity: 0.5; */
  display: flex;
  height: 2.72rem;
  align-items: center;
  justify-content: space-evenly;
}

.platform-popup-pane .btn-sty .cancal {
  font-size: 1.06rem;
  font-weight: 400;
  color: #030303;
}

.platform-popup-pane .btn-sty .line {
  height: 100%;
  width: 0.05rem;
  background: #dbdbdb;
  display: block;
}

.platform-popup-pane .btn-sty .sure {
  font-size: 1.06rem;
  font-weight: 400;
  color: #f14e4e;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
.my-inventory {
  .pane {
    margin: 0 0.63rem;

    .box {
      background: #fff;
      border-radius: 0.25rem;
      width: 100%;
      margin-top: 0.63rem;
      padding: 0.63rem;

      .top-tip {
        font-size: 0.65rem;
        font-weight: 400;
        color: #807e7e;
        display: flex;
        justify-content: space-between;

        .order-on {
        }

        .date {
        }
      }

      .middle-detail {
        display: flex;
        margin: 0.81rem 0 0 0;

        img {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 0.19rem;
          margin: 0 !important;
        }

        .right-goods {
          margin-left: 0.63rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100%;

          .top-name {
            text-align: left;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 这里是超出几行省略 */
            overflow: hidden;
          }

          .active-bottom-box {
            display: flex;
            justify-content: space-between;
          }

          .active-num {
            margin-right: 0 !important;
          }

          .bottom-box {
            display: flex;
            text-align: left;
            font-size: 0.69rem;
            font-weight: 400;
            color: #807e7e;
            align-items: center;

            .num {
              // margin-right: 1.82rem;
            }

            .bottom-right {
              font-size: 0.63rem;
              font-weight: 400;
              color: #f51d1d;
              display: flex;
              align-items: center;
            }

            .van-count {
              font-size: 0.63rem;
              font-weight: 400;
              color: #f51d1d;
              margin-left: 0.3rem;
            }
          }
        }
      }

      .active-bottom-btn {
        background: #c0c0c0 !important;
      }

      .bottom-btn {
        text-align: left;
        margin: 1.25rem 0.72rem 0.63rem 0.72rem;
        display: flex;
        justify-content: space-between;

        .pick-up-goods {
          padding: 0.56rem 3.47rem;
          background: #f51d1d;
          border-radius: 0.94rem;
          font-size: 0.75rem;
          font-weight: 400;
          color: #fff;
        }

        .consignment {
          padding: 0.56rem 3.47rem;
          background: #f08012;
          border-radius: 0.94rem;
          font-size: 0.75rem;
          font-weight: 400;
          color: #fff;
        }

        .platform-repurchase {
          padding: 0.56rem 2.75rem;
          background: #f08012;
          border-radius: 0.94rem;
          font-size: 0.75rem;
          font-weight: 400;
          color: #fff;
        }
      }
    }
  }

  .consignment-popup-pane {
    margin: 1.31rem 1.5rem 1.64rem 1.5rem;

    .top-pane {
      display: flex;
      justify-content: center;
      position: relative;
      font-size: 0.95rem;
      font-weight: 500;
      color: #3b3b4a;
    }

    .close-icon {
      position: absolute;
      right: 0;
      top: 25%;
      zoom: 0.9;
      color: #707070;
    }

    .tip {
      margin: 2.2rem 0 4.66rem 0;
      font-size: 0.8rem;
      font-weight: 400;
      color: #3b3b4a;
    }

    .btn-sty {
      background: #f51d1d;
      border-radius: 37px;
      padding: 0.75rem 9.31rem;
      color: white;
    }
  }
}
</style>
